<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <child 
      child-title="hello" 
      url="http://www.baidu.com"
      :num="3"
      :bool="true"
      :arr="['a', 'b', 'c']"
      :obj="obj"
      v-bind="{a: 100, b: 200}"
    ></child>
    <child2 :obj="obj"></child2>
  </div>
  <script>
    Vue.component('child', {
      props: ['childTitle', 'url', 'num', 'bool', 'arr', 'obj', 'obj2', 'a'],
      data() {
        return {
          title: this.childTitle
        }
      },
      template: `
        <div>child 
          {{changedTitle}}
          {{url}}
          {{typeof num}}
          {{typeof bool}}
          {{arr.length}}
          {{obj.x}}
          {{obj2}}
          {{a}}
        </div>
      `,
      computed: {
        changedTitle() {
          return this.childTitle + 'aaaa'
        }
      },
      mounted() {
        // this.childTitle = 'aaaa'
        setTimeout(() => {
          this.obj.x = 10000
        }, 3000)
      },
    })

    Vue.component('child2', {
      props: ['obj'],
      template: `
        <div>{{obj}}</div>
      `
    })
    var vm = new Vue({
      el: '#root',
      data: {
        obj: {x: 0, y: 1}
      }
    })
  </script>
</body>
</html>